<template>
  <div>
    <div class="info-container">
      <div class="title">个人信息</div>
      <a-divider />
      <div class="info-main">
        <div class="avatar-container">
          <img :src="user.header" class="avatar-img">
          <div class="avatar-upload">
            <a href="javascript:void(0);" @click="openHeaderUploadDialog">修改头像</a>
          </div>
        </div>
        <div class="info-right">
          <div class="meta">
            <div class="id">ID：<span v-text="user.userId" /></div>
            <div class="op-info">
              <div class="op-collection">收藏 <span v-text="collectionCount" /></div>
              <div class="op-comment">评论 <span v-text="commentCount" /></div>
            </div>
          </div>
          <a-divider />
          <div class="info-form">
            <a-form :form="infoForm" @submit="updateUserInfo">
              <a-form-item label="密码" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-button type="primary" @click="openUpdatePwdDialog">点我修改</a-button>
              </a-form-item>
              <a-form-item label="昵称" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input
                  v-decorator="[
                    'nickname',
                    { rules: [{ required: true, message: '请输入昵称!' }] }
                  ]"
                  placeholder="请输入昵称"
                />
              </a-form-item>
              <a-form-item label="邮箱" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input
                  v-decorator="[
                    'userEmail',
                    { rules: [{ required: true, message: '请输入邮箱!' }] }
                  ]"
                  placeholder="请输入邮箱"
                />
              </a-form-item>
              <a-form-item label="性别" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-radio-group v-decorator="['sex']">
                  <a-radio :value="1">男</a-radio>
                  <a-radio :value="2">女</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" block>修改</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
    </div>

    <a-modal
      title="修改密码"
      centered
      :visible="showUpdatePwd"
      @ok="handleSuccessUpdatePwd"
      @cancel="handleCancelUpdatePwd"
    >
      <a-form :form="passwordForm">
        <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <a-input
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码!' }] }
            ]"
            type="password"
            placeholder="请输入密码"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      title="修改头像"
      centered
      :visible="showUpdateAvatar"
      @ok="handleSuccessUpdateAvatar"
      @cancel="handleCancelUpdateAvatar"
    >
      <a-upload-dragger name="file" :multiple="true" :action="uploadUrl" :headers="headers" @change="handleUploadAvatar">
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击上传或拖拽到这里</p>
      </a-upload-dragger>
    </a-modal>
  </div>
</template>
<script>
import userApi from '@/api/user'
import md5 from 'js-md5'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      user: this.$store.getters.getUser,
      infoForm: this.$form.createForm(this),
      passwordForm: this.$form.createForm(this),
      showUpdatePwd: false,
      showUpdateAvatar: false,
      collectionCount: 0,
      commentCount: 0,
      uploadUrl: process.env.VUE_APP_UPLOAD_URL, // 上传图片路径
      headers: { // 上传文件的请求头
        Authorization: getToken()
      }
    }
  },
  created() {
    this.getCollectionAndCommentCount()
  },
  mounted() {
    this.infoForm.setFieldsValue({ nickname: this.user.nickname })
    this.infoForm.setFieldsValue({ userEmail: this.user.userEmail })
    this.infoForm.setFieldsValue({ sex: this.user.sex })
  },
  methods: {
    // 修改个人信息
    updateUserInfo(e) {
      e.preventDefault()
      // eslint-disable-next-line handle-callback-err
      this.infoForm.validateFields((err, values) => {
        values.userId = this.user.userId
        userApi.update(values).then(res => {
          this.$message.info(res.msg)
          if (values.nickname) {
            this.user.nickname = values.nickname
          }
          if (values.userEmail) {
            this.user.userEmail = values.userEmail
          }
          if (values.sex) {
            this.user.sex = values.sex
          }
          this.$store.commit('SET_USER', this.user)
        })
      })
    },
    // 统计该用户的收藏及评论数
    getCollectionAndCommentCount() {
      userApi.getCollectionAndCommentCount().then(resp => {
        this.collectionCount = resp.data.collectionCount
        this.commentCount = resp.data.commentCount
      })
    },
    // 打开修改密码窗口
    openUpdatePwdDialog() {
      this.showUpdatePwd = true
    },
    // 成功修改密码
    handleSuccessUpdatePwd() {
      // eslint-disable-next-line handle-callback-err
      this.passwordForm.validateFields((err, values) => {
        if (values.password) {
          values.userId = this.user.userId
          values.password = md5(values.password)
          userApi.update(values).then(res => {
            this.$message.info(res.msg)
            this.user.password = ''
          })
        }
      })
      this.showUpdatePwd = false
    },
    // 取消修改密码
    handleCancelUpdatePwd() {
      this.showUpdatePwd = false
    },
    // 打开头像上传窗口
    openHeaderUploadDialog() {
      this.showUpdateAvatar = true
    },
    // 执行头像上传
    handleUploadAvatar(info) {
      // 文件上传触发
      const status = info.file.status
      if (status === 'done') {
        const res = info.file.response
        this.$message.success(res.msg)
        this.user.header = res.data
        userApi.update(this.user).then(res => {
          this.$store.commit('SET_USER', this.user)
        })
        this.uploadDialog = false
      }
    },
    // 成功修改头像
    handleSuccessUpdateAvatar() {
      this.showUpdateAvatar = false
    },
    // 取消修改头像
    handleCancelUpdateAvatar() {
      this.showUpdateAvatar = false
    }
  }
}
</script>
<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  color: #3d3d3d;
}
.info-main {
  display: flex;
  flex-direction: row;
}
.info-right {
  width: 100%;
}
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.avatar-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  margin-top: 5px !important;
}
.avatar-upload {
  font-size: 14px;
  margin-top: 5px;
  text-align: center;
}
.id {
  font-size: 14px;
  color: #999;
}
.op-info {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
}
.op-collection {
  font-size: 14px;
  color: #4d4d4d;
}
.op-comment {
  margin-left: 18px;
  font-size: 14px;
  color: #4d4d4d;
}
</style>
